<template>
  <div>
    <div class="theTimeCon">
      <div class="timeChoose" @click="showTimePicker">
        <div class="time">{{startDateShow}}</div>
        <div class="grayCrow"></div>
      </div>
      <div class="range">
        至
      </div>
      <div class="timeChoose" @click="showTimePicker">
        <div class="time">{{endDateShow}}</div>
        <div class="grayCrow"></div>
      </div>
    </div>
    <van-popup
      v-model="dataChooseFlag"
      position="bottom"
    ><date-choose-year
        v-if="dataChooseFlag"
        :startDate="startDateShow"
        :endDate="endDateShow"
        @closeX="dataChooseFlag = false"
      ></date-choose-year>
    </van-popup>
  </div>
</template>

<script>
  import DateChooseYear from './DateChooseYear'
  import { mapGetters } from 'vuex'
  export default {
    name: 'ChooseTimeYear',
    components: {
      DateChooseYear
    },
    data () {
      return {
        dataChooseFlag: false,
        startDateShow: '',
        endDateShow: ''
      }
    },
    mounted () {
      this.initDate()
    },
    computed: {
      ...mapGetters(['detailTime', 'show', 'timeObj'])
    },
    watch: {
      detailTime: {
        handler (newValue, oldValue) {
          this.startDateShow = this.detailTime.startData
          this.endDateShow = this.detailTime.endData
        },
        deep: true
      },
      show: {
        handler (newValue) {
          this.dataChooseFlag = this.show
        }
      }
    },
    methods: {
      showTimePicker () {
        this.dataChooseFlag = true
        this.$store.commit('SETSHOW', true)
      },
      initDate () {
        this.$store.commit('SETDETAILTIME', { startData: this.timeObj.startData, endData: this.timeObj.endData })
        this.startDateShow = this.timeObj.startData
        this.endDateShow = this.timeObj.endData
      }
    }
  }
</script>

<style lang="less" scoped>
  .ccc {
    color: #cccccc;
  }
  .theTimeCon {
    display: flex;
    .range {
      line-height: 0.6rem;
      margin: 0 0.1rem;
      color: #999999;
      font-weight: 400;
      font-size: 0.30rem
    }

    .theDate {
      width: 1.8rem;
      height: 0.6rem;
      font-size: 0.26rem;
      text-align: center;
      font-weight: 400;
      line-height: 0.56rem;
      color: #666666;
      background: #f6f6f6;
      border-radius: 0.12rem;
      border: 0.01rem solid #cbcbcb;
    }

    .timeChoose {
      display: flex;
      align-items: center;
      font-size: 0.26rem;
      color: #666666;
      padding: 0 0.12rem;
      background: #f7f7f7;
      border-radius: 0.12rem;
      border: 0.01rem solid #cbcbcb;
      text-align: center;

      .time {
        font-weight: 400;
        font-size: 0.24rem;
      }

      .grayCrow {
        width: 0;
        height: 0;
        border-right: 0.1rem solid transparent;
        border-left: 0.1rem solid transparent;
        border-top: 0.1rem solid #cccccc;
      }
    }
  }
</style>
